<template>
  <div class="bottom">
    <div class="bottombar">
      <!-- 路由出口 -->
      <router-link to="/main">
        <div>
          <van-icon name="wap-home" size=".3rem" />
          <span>首页</span>
        </div>
      </router-link>
      <router-link to="/class">
        <div>
          <van-icon name="shop-collect" size=".3rem" />
          <span>烘焙课堂</span>
        </div>
      </router-link>
      <router-link to="/wenda">
        <div>
          <van-icon name="umbrella-circle" size=".3rem" />
          <span>烘焙圈</span>
        </div>
      </router-link>
      
        <div @click="Do">
          <van-icon name="manager" size=".3rem" />
          <span>我的</span>
        </div>
      
    </div>
  </div>
</template>

<script>
export default {

data() {
  return {
  
  }
},
  methods: {
    Do() {
      
      // console.log(sessionStorage.username);
      if(sessionStorage.username ==undefined){
      
        this.$router.push('/login').catch(err =>{return err})
      }
      else{
        this.$router.push('/wode').catch(err =>{return err})

      }
    }
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.8rem;
}
.bottombar {
  background-color: #ffffff;
  width: 100%;
  height: 0.8rem;
  align-items: center;
  border-top: 1px solid #f2b9c8;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
}
.bottombar div {
  height: 46px;
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.router-link-active .van-icon {
  color: #ee87b6;
}
.router-link-active span {
  color: #000;
}
</style>
